<template>
	<div id="cont">
		<div id="banner"></div>

		<div class="content">
			<p class="title">加入合作伙伴</p>
			<div class="register">
				<ul class="join clear">
					<li>
						<div class="num">01</div>
						<p>注册版权云账号</p>
					</li>
					<li>
						<div class="num">02</div>
						<p>提交合作申请</p>
					</li>
					<li>
						<div class="num">03</div>
						<p>进行合作洽谈</p>
					</li>
					<li>
						<div class="num">04</div>
						<p>签订合作协议</p>
					</li>
					<li id="friend">
						<router-link to="/partnerApply">
							申请加入合作伙伴
						</router-link>
					</li>
				</ul>
			</div>
			<p class="title">优秀伙伴</p>
			<ul class="friend clear">
				<li><img src="../assets/friend.png" alt=""></li>
				<li><img src="../assets/friend.png" alt=""></li>
				<li><img src="../assets/friend.png" alt=""></li>
				<li><img src="../assets/friend.png" alt=""></li>
				<li><img src="../assets/friend.png" alt=""></li>
				<li><img src="../assets/friend.png" alt=""></li>
			</ul>

		</div>
	</div>
</template>

<script>
export default {
    created() {
        this.menu();
    },
    methods: {
        menu() {
            window.scrollTo(0, 0);
        }
    }
};
</script>
<style lang="scss" scoped>
.clear:after {
    display: block;
    clear: both;
    content: "";
}

#cont {
    min-width: 1200px;
}

#banner {
    width: 100%;
    height: 318px;
    background: url("../assets/banner6.png") no-repeat center #000107;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
}

.content {
    width: 100%;
    background-color: #f7f7f7;
    padding: 15px 0 20px 0;
    .title {
        text-align: center;
        margin: 70px auto 40px;
        font-size: 28px;
        font-weight: 800;
    }

    .register {
        width: 1200px;
        margin: 0 auto;
        border: 1px solid #e9e9e9;
        background-color: #fff;
        .join {
            width: 1200px;
            flex-wrap: wrap;
            padding: 60px;
            & > li {
                width: 25%;
                float: left;
                & > .num {
                    height: 80px;
                    text-align: center;
                    line-height: 80px;
                    font-size: 20px;
                    font-weight: bolder;
                    margin: 0 auto;
                }

                & > p {
                    text-align: center;
                    font-size: 15px;
                    margin: 20px auto;
                }
            }
            & > li:nth-child(1) > .num {
                background: url("../assets/u1835-1.png") no-repeat center,
                    url("../assets/u1893.png") no-repeat right center;
            }
            & > li:nth-child(2) > .num {
                background: url("../assets/u1835-2.png") no-repeat center,
                    url("../assets/u1893.png") no-repeat right center,
                    url("../assets/u1893.png") no-repeat left center;
            }
            & > li:nth-child(3) > .num {
                background: url("../assets/u1835-3.png") no-repeat center,
                    url("../assets/u1893.png") no-repeat right center,
                    url("../assets/u1893.png") no-repeat left center;
            }
            & > li:nth-child(4) > .num {
                background: url("../assets/u1835-4.png") no-repeat center,
                    url("../assets/u1893.png") no-repeat left center;
            }
            & > .empty {
                background: url("../assets/u1893.png") no-repeat;
                background-position: 0 40px;
            }
            & > #friend {
                flex: none;
                width: 100%;
                text-align: center;
                & > a {
					display: inline-block;
                    width: 240px;
					height: 50px;
					line-height: 50px;
                    color: #fff;
                    font-size: 18px;
					background-color: #0c569a;
					margin-top: 40px;
                }
            }
        }
    }

    .friend {
        width: 1200px;
        margin: 0 auto;
        & > li {
            width: 372px;
            border: 1px solid #e9e9e9;
            float: left;
            margin: 0px 41px 40px 0;
            & > img {
                width: 100%;
                display: block;
            }
        }
        & > li:nth-child(3n) {
            margin-right: 0;
        }
    }
}
</style>
